import React, { Component } from 'react';
import { Icon } from 'antd';

class SolutionMore extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    }
  }
  toggleShow = () => {
    this.setState({
      show: !this.state.show
    })
  }

  render() {
    const classNames1 = ['solution-more-open'];
    const classNames2 = ['solution-more-content'];
    if (this.state.show) {
      classNames1.push('on');
      classNames2.push('on');
    }
    return (
      <div className='web-page-block solution-more' >
        <div className='web-page-block-content'>
          <br />
          <br />
          <div onClick={this.toggleShow} className={classNames1.join(' ')}>更多解决方案 <Icon type="down" /></div>
          <br />
          <br />
          <br />
          <div className={classNames2.join(' ')}>
            <div>
              <a><img src={require('./../img/solution/solution-icon1.png')} alt="icon" />微服务</a>
              <a><img src={require('./../img/solution/solution-icon2.png')} alt="icon" />物联网</a>
              <a><img src={require('./../img/solution/solution-icon3.png')} alt="icon" />云方案</a>
              <a><img src={require('./../img/solution/solution-icon4.png')} alt="icon" />DevOps</a>
            </div>
            <div onClick={this.toggleShow} className='solution-more-close'><Icon type="up" /></div>
          </div>
        </div>
      </div>
    );
  }
}
export default SolutionMore;